<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <script type="text/javascript" src="${ctx}/js/lib.js"></script>
    <script type="text/javascript" src="${ctx}/js/jquery.SuperSlide.js"></script>
    <script type="text/javascript" src="${ctx}/js/jquery.scrollLoading.js"></script>
    <style type="text/css">
		body{margin:0; background: url(${ctx}/img/bg.png) no-repeat top center; }	
		.title{width:180px; margin: 0 auto;margin-top: 8%;margin-bottom: 50px; z-index: 2}
		.title-1{font-family:"PingFang SC Regular"; font-weight: bold;color: black;  border-bottom: solid 1px black;padding-bottom: 10px;font-size: 24px;text-align: center;}
		.title-2{font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; font-size:18px;color: black; padding-top: 6px;text-align: center;}
		.reservation{width: 580px; background-color: rgba(235, 235, 235,0.85);box-shadow: 0px 3px 18px 0px rgba(7, 0, 2, 0.69); margin: 0 auto;position: relative;  border-radius: 6px; padding-bottom: 40px; padding-top: 40px;z-index: 2}
		.content{width: 500px; height: 40px;line-height:40px;margin-left:40px; color: #666;font-size:14px;  background-color: white; border-radius: 4px; margin-top: 30px; position: relative;border: none;}
	</style>
    <title>软装到家</title>
</head>
<body>

<div class="title">
 	<div class="title-1">预约设计</div>
	<div class="title-2">Design Reservation</div>
 </div>	
 <div class="reservation">
	 <input type="text" id="name" placeholder="  请填写姓名" class="content" style="margin-top: 0
	 ">
	 <input type="text" id="mobile" placeholder="  请填写手机号" class="content">
	 	<select name="province" id="provinceId" class="content" style="width: 245px; ">
	 		<option value="">&nbsp;&nbsp;省份</option>
	 		<c:forEach items="${provinces }" var="p">
	 			<option value="${p.id }">${p.name }</option>
	 		</c:forEach>
	 	</select>
	  <select name="city" id="cityId" class="content"  style="width: 245px; margin-left: 10px;">
	  	<option value="">&nbsp;&nbsp;城市</option>
	  </select>
	  <input type="hidden" id="from" value="${from }">
	  <input type="button" onclick="order2()" class="content" style="text-align: center; color: #fff;background-color: #ED145B;" value="一键预约"> 
 </div>
<script type="text/javascript" src="${ctx }/res/js/plugins.js"></script>
<script type="text/javascript" src="${ctx }/res/js/modules.js"></script>
<script type="text/javascript" src="${ctx }/res/js/common.js"></script>
<script src="${ctx }/res/hplus/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript">

    $('#provinceId').change(function() {
    	$.ajax({
    		url: "${ctx}/province/findArea",
    		data: {
    			provinceId: $('#provinceId').val()
    		},
    		dataType: "json",
    		success: function(data) {
    			$('#cityId').html('');
    			$('#cityId').append('<option value="">&nbsp;&nbsp;城市</option>');
				for (var i = 0; i < data.length; i++) {
					var obj = data[i];
					var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
					$('#cityId').append(option);	
				}
    		}
    		
    	});
    });
    
    // 一键预约
    function order2() {
    	//window.yysj("<iframe src='/model/yysj.html' width='100%' height='175px' frameborder='0' scrolling='no'></iframe>"); 
    	$.ajax({
    		url: "${ctx}/designer/orderDesigner",
    		data: {
    			name: $('#name').val(),
    			mobile: $('#mobile').val(),
    			provinceId: $('#provinceId').val(),
    			cityId: $('#cityId').val(),
    			//communityId: $('#communityId').val(),
    			from: $('#from').val()
    		},
    		dataType: "json",
    		type: "post",
    		success: function(data) {
    			if (data.success) {
    				layer.msg('预约成功，请耐心等待!',{time: 1000, icon:6,shade: [0.5, '#f5f5f5']});
    				$('#name').val('');
    				$('#mobile').val('');
    				$('#provinceId').val('');
    				$('#cityId').val('');
    			} else {
    				layer.alert(data.msg,{icon:2,skin: 'layer-ext-moon'});
    			}
    		}
    		
    	});	
    }
</script>
</body>
</html>
